<!--
 * @Author: taosong 2289713738@qq.com
 * @Date: 2023-12-19 21:44:45
 * @LastEditors: taosong 2289713738@qq.com
 * @LastEditTime: 2023-12-20 11:19:12
 * @FilePath: \vue3.0-study\src\example\bidirectionalBinding\index.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!-- 双向绑定 -->
<!-- 元素双向绑定  v-model => 两部分{ value ,@input } -->
<!-- 组件双向绑定同理 v-model => { modelValue, @update:modelValue } -->
<!-- 组件双向绑定可以通过v-model:title来改变传递的modelValue的名字, 这种方法可以使一个组件同时传递多个prop只需起不同的名字 -->
<script setup lang="ts">
import bidirectionalBinding from './components/bidirectionalBinding.vue'
import { ref } from 'vue'

const name = ref('songs')
</script>

<template>
  <div>
    <bidirectionalBinding v-model="name" />
    <button @click="() => console.log(name)">查看双向绑定情况</button>
  </div>
</template>

<style lang="scss" scoped></style>
